<!DOCTYPE html>
<html lang="en">

<head>
    <meta charest="UTF-8">
    <meta name="viewport" content="width=device-width，initial-scale=1.0">
    <title>css 布局、动画练习</title>
    <link rel="stylesheet" href="main.css">
    <style>
        #none {
            display: none;
        }

        #head {
            border: 1px #CCC solid;
            width: 410px;
            height: 100px;
            margin-bottom: 10px;
        }

        #main {
            border: 1px #7AC5CD solid;
            width: 400px;
            margin-bottom: 10px;
            padding: 5px;
            overflow: hidden;
        }

        #left {
            border: 1px #7AC5CD solid;
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            line-height: 100px;
        }

        #middle {
            border: 1px #7AC5CD solid;
            width: 184px;
            height: 100px;
            margin-left: 5px;
            float: left;

        }

        #right {
            border: 1px rgb(148, 55, 55) solid;
            width: 100px;
            height: 100px;
            margin-left: 5px;
            float: left;
        }

        .back {
            width: 100px;
            height: 100px;
            border: 1px #79CDCD solid;
            position: fixed;
            right: 10px;
            bottom: 75px;

        }

        .relative {
            position: relative;
            top: 150px;
        }

        .absolute {
            position: absolute;
            top: 150px;
        }

        .bg {
            background-color: #fcc;
        }

        .fl {
            width: 31%;
            float: right;
        }

        .container {
            margin: 0， auto;
            overflow: hidden;
            width： 1000px;
        }
    </style>

</head>

<body>
    <header>
        <h1>醉后不知天在水</h1>
    </header>
    <main>
        <section>
            <h2> display属性</h2>
            <div id="none">元素如何显示，可以通过 display 属性进行指定。</div>
            <div>元素如何显示，可以通过 display 属性进行指定。</div>
        </section>
        <section>
            <div id="head">头部</div>
            <div id="main">
                <div id="left">左侧</div>
                <div id="right">中间</div>
                <div id="middle">右侧</div>
                <p style=“clear：both”>这是浮动后的文字</p>
        </section>
        <section>
            <h2> position</h2>
            <div class="back"></div>
            <div class="container">
                <div class="fl">
                    <h2>正常信息流</h2>
                    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                    <p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
                    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                </div>
                <div class="fl">
                    <h2>相对定位</h2>
                    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                    <p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
                    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                    <code>.relative { position: relative; top:150px;}</code>
                </div>
                <div class="fl" style="position: relative;">
                    <h2>绝对定位</h2>
                    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                    <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
                    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                    <code>.absolute {
                    position: absolute;
                    top:150px;}
                    
                  </code>
                </div>
            </div>
        </section>
        <section>
            <h2>居中问题</h2>
            <div class="center-table">
                <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
            </div>
            <style>
                .center-table {
                    display: table;
                    height: 250px;
                    background: white;
                    width: 240px;
                    margin: 20px;
                }

                .center-table p {
                    display: table-cell;
                    margin: 0;
                    background: black;
                    color: white;
                    padding: 20px;
                    border: 10px solid white;
                    vertical-align: middle;
                }
            </style>
        </section>
        <section>
            <h2>动画</h2>
            <style>
                .box {
                    background: #2db34a;
                    transition-property: all;
                    transition-duration: 1s;
                    transition-timing-function: linear;
                    transition-delay: 1s;
                    height: 100px;
                    width: 100px;
                    text-align: center;
                    line-height: 100px;
                    color: blue
                }

                .box:hover {
                    background: #ff7b29;
                    border: 1px #fcc solid;
                    border-radius: 100px;
                }
            </style>
            <div class="box">
                .box
            </div>
        </section>


    </main>
    <footer style="clear:both;">
        <p id="footer"><span>《网页设计与制作》课程练习</span> <span>学号：P171212407</span> <span>指导老师：杨志宏</span></p>
    </footer>
</body>




</html>